<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
				</image>
				<view>开具发票</view>
			</view>
		</view>
		<image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
		<view class="one-box">
			<view class="left-con">
				<view class="c-name">开票金额</view>
				<view class="c-money">￥{{totalPrice}}</view>
			</view>
			<!-- <view class="c-title">路内停车</view> -->
		</view>
		<view class="condetail">
			<view class="more-box">
				<view class="title-con">
					<view class="red">*</view>
					<view class="names">抬头类型</view>
				</view>
				<view class="two-select">
					<view class="tw-con" @click="tabState(2)">
						<image :src="headerBill.invoiceType==2?imageUrl +'ss1.png':imageUrl +'ss2.png'" mode="widthFix"
							class="s-img">
						</image>
						<view :class="headerBill.invoiceType==2?'select':''">企业单位</view>
					</view>
					<view class="tw-con" @click="tabState(1)">
						<image :src="headerBill.invoiceType==1?imageUrl +'ss1.png':imageUrl +'ss2.png'" mode="widthFix"
							class="s-img">
						</image>
						<view :class="headerBill.invoiceType==1?'select':''">个人</view>
					</view>
				</view>
			</view>
			<view class="more-box">
				<view class="title-con">
					<view class="red">*</view>
					<view class="names">发票抬头</view>
				</view>
				<view class="molist">
					<input type="text" placeholder="请输入发票抬头" placeholder-class="mo" v-model="headerBill.invoiceTitle" />
					<view @click="nextPage">选择</view>
				</view>
			</view>
			<view v-if="headerBill.invoiceType==2?true:false">
				<view class="more-box">
					<view class="title-con">
						<view class="red">*</view>
						<view class="names">公司税号</view>
					</view>
					<view class="molist">
						<input type="text" placeholder="请输入公司税号" placeholder-class="mo" v-model="headerBill.invoiceTaxNo" />
					</view>
				</view>
				<block v-if="!show">
					<view class="list">
						<view>注册地址</view>
						<input type="text" placeholder="请输入注册地址" placeholder-class="mo" v-model="headerBill.companyAddress" />
					</view>
					<view class="list">
						<view>注册电话</view>
						<input type="text" placeholder="请输入注册电话" placeholder-class="mo" v-model="headerBill.companyPhone" />
					</view>
					<view class="list">
						<view>开户银行</view>
						<input type="text" placeholder="请输入开户银行" placeholder-class="mo" v-model="headerBill.bankName" />
					</view>
					<view class="list">
						<view>银行账号</view>
						<input type="text" placeholder="请输入银行账号" placeholder-class="mo" v-model="headerBill.bankNumber" />
					</view>
				</block>
				<view class="show" v-if="show" @click="tab">
					<view>展开选填信息</view>
					<image :src="imageUrl +'left55.png'" mode="widthFix"></image>
				</view>
				<view class="show" v-else @click="tab">
					<view>收起选填信息</view>
					<image :src="imageUrl +'left66.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="condetail">
			<view class="list">
				<view>电子邮件</view>
				<input type="text" placeholder="请输入电子邮件" placeholder-class="mo" v-model="headerBill.receiveEmail" />
			</view>
			<view class="list">
				<view>手机号码</view>
				<input type="text" placeholder="请输入手机号码" placeholder-class="mo" v-model="headerBill.receivePhone" />
			</view>
		</view>
		<view class="null"></view>
		<view class="foot-box">
			<view @click="submitBtn">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post
	} from "../../api/myHttps";
	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0,
				show: true,
				totalPrice: 0,
				headerBill: {
					invoiceType: 2
				},
				show: false,
				choseIds: '',
				orderType:''
			}
		},
		onLoad(options) {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20

			this.totalPrice = options.totalPrice;
			this.choseIds = options.choseIds;
			this.orderType = options.orderType;

			this.getHeaderBill()
		},
		onShow() {
			const app = getApp();
			if (app.globalData.updatedUserData) {
				// 给当前页面 data 赋值
				this.headerBill = app.globalData.updatedUserData;

				// 清空，避免下次进入误触发
				app.globalData.updatedUserData = null;
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tab() {
				this.show = !this.show
			},
			tabState(num) {
				this.headerBill.invoiceType = num
			},
			nextPage() {
				uni.navigateTo({
					url: '/pages/myInvoice/myInvoice?fpType=1'
				})
			},
			getHeaderBill() {
				let ownerId = uni.getStorageSync('ownerId');
				get('/city-mobile/invoice/listMyTitle?ownerId=' + ownerId, null).then((res) => {
					console.log(res);
					this.headerBill = res[0];
				})
			},
			submitBtn() {
				if (!this.headerBill.invoiceTitle) {
					uni.showToast({
						title: '请输入发票抬头!',
						icon: 'none', // 不显示图标
						duration: 2000, // 持续时间
						mask: false // 是否显示透明蒙层
					});
					return;
				}
				if (this.headerBill.invoiceType == 2 && !this.headerBill.invoiceTaxNo) {
					uni.showToast({
						title: '请输入公司税号!',
						icon: 'none', // 不显示图标
						duration: 2000, // 持续时间
						mask: false // 是否显示透明蒙层
					});
					return;
				}
				var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (!this.headerBill.receiveEmail || !emailReg.test(this.headerBill.receiveEmail)) {
					uni.showToast({
						title: '请输入正确格式的邮箱!',
						icon: 'none', // 不显示图标
						duration: 2000, // 持续时间
						mask: false // 是否显示透明蒙层
					});
					return;
				}
				if (!this.choseIds) {
					// 错误提示（带图标）
					uni.showToast({
						title: '页面超时请重新进入',
						icon: 'error',
						duration: 2000
					})

					this.goBack();
					return;
				}
				uni.showLoading({
					title: '开票中...',
					mask: true // 防止用户操作
				});
				let params = {
					invoiceCharge: this.totalPrice * 100,
					orderType: this.orderType,
					outTradeNo: this.choseIds,
					receivePhone: this.headerBill.receivePhone,
					receiveEmail: this.headerBill.receiveEmail,
					companyAddress: this.headerBill.companyAddress,
					companyPhone: this.headerBill.companyPhone,
					bankName: this.headerBill.bankName,
					bankNumber: this.headerBill.bankNumber,
					invoiceTaxNo: this.headerBill.invoiceTaxNo,
					invoiceTitle: this.headerBill.invoiceTitle,
					invoiceType: this.headerBill.invoiceType,
					ownerId: uni.getStorageSync('ownerId'),
				};
				post('/city-mobile/invoice/kp', params).then((res) => {

					console.log('开票请求返回：', res);
					uni.hideLoading();

				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: relative;
		z-index: 999;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			height: 86rpx;

			.title-names {
				width: 750rpx;
				position: absolute;
				text-align: center;
			}

			.logo {
				margin-left: 18rpx;
				width: 40rpx;
				height: 40rpx;
				position: relative;
				z-index: 9999;
			}

			view {
				margin-left: 22rpx;
				font-size: 36rpx;
				color: #1C274C;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.one-box {
		width: 690rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 128rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left-con {
			display: flex;
			align-items: center;
			margin-left: 20rpx;

			.c-name {
				width: 166rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #1C274C;
			}

			.c-money {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #24A7CE;
			}
		}

		.c-title {
			width: 116rpx;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 32rpx;
			padding: 4rpx 0;
			border-radius: 8rpx;
			background-color: #24A7CE;
			margin-right: 20rpx;
		}
	}

	.condetail {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		position: relative;
		padding: 20rpx 0;

		.more-box {
			width: 650rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			margin-left: 20rpx;

			.title-con {
				display: flex;
				align-items: center;

				.red {
					color: #FF2C41;
					font-size: 28rpx;
				}

				.names {
					width: 148rpx;
					color: #1C274C;
					font-size: 28rpx;
					line-height: 48rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
					font-weight: 600;
				}
			}

			.molist {
				width: 474rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				input {
					font-size: 28rpx;
					color: #1C274C;
				}

				.mo {
					color: rgba(28, 39, 76, 0.60);
				}

				view {
					width: 88rpx;
					height: 48rpx;
					border-radius: 50rpx;
					background: linear-gradient(0deg, rgba(36, 167, 206, 0.10) 0%, rgba(36, 167, 206, 0.10) 100%), #FFF;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #24A7CE;
					font-weight: 600;
				}
			}

			.two-select {
				display: flex;
				align-items: center;

				.tw-con {
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					view {
						font-size: 28rpx;
						color: #1C274C;
						margin-right: 78rpx;
						margin-left: 20rpx;
					}

					.select {
						color: #24A7CE;
						font-weight: 600;
					}
				}
			}
		}

		.show {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;

			view {
				font-size: 28rpx;
				color: #24A7CE;
				line-height: 48rpx;
			}

			image {
				width: 16rpx;
				height: 16rpx;
				margin-left: 10rpx;
			}
		}

		.list {
			width: 650rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			margin-left: 20rpx;

			view {
				width: 166rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #1C274C;
				margin-right: 10rpx;
			}

			input {
				font-size: 28rpx;
				color: #1C274C;
			}

			.mo {
				color: rgba(28, 39, 76, 0.60);
			}
		}
	}

	.foot-box {
		width: 750rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 20rpx);

		view {
			width: 690rpx;
			height: 88rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 32rpx;
			background: linear-gradient(to right, #00BBFF, #5ADA7A);
			font-weight: 600;
		}
	}
</style>